<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/7/25
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="${ctx}/common/css/bootstrap.min.css">
  <title>商城</title>
  <style>
    .nav1 p {
      margin-top: 5px;
    }

    .span-text {
      margin-top: 5px;
    }
    .span-text01{
      background:#ff4001 ;
      border-radius: 2px;
      color: #FFFFFF;
      padding: 2px;
    }


    .recommend-model {
      margin-top: 30px;
    }

    .recommend-model p {
      border-bottom: 2px solid #C9302C;
      display: inline;
      font-size: 16px;
      padding-bottom: 10px;
    }

    .recommend-model small {
      display: block;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    img {
      border: 0px;
    }

    a {
      color: #05a;
      text-decoration: none;

    }

    a:hover {
      color: #0055aa;

    }
    h5{
      margin: 1px;
    }
    div.modal-dialog{
      width: 450px;
    }
    .btn1{
      line-height: 25px;
    }
    .btn1 p{
      padding-top: 8px;
    }
    .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
        color: #fff;
        background-color: #ff4001;
    }
  </style>
</head>
<body>
<div style="position: fixed;z-index: 1;left: 0px;right: 0px;">
  <div style="background: #f9f9f9;">
    <div class="container" style="height: 28px;">
      <div class="row nav1">
        <div class="col-xs-6">
          <div class="pull-left span-text">
            <span class="glyphicon glyphicon-map-marker"></span>广州
          </div>
        </div>
        <div class="col-xs-6">
          <div class="pull-right span-text">
            <button class="glyphicon glyphicon-user btn-link" style="color: #000;"></button>联系客服
            &nbsp;
            <button class="glyphicon glyphicon-comment btn-link" style="color: #000;"></button>微信
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr style="margin-top: 0px;margin-bottom: 0px;">
  <div class="container" style="padding: 21px 0;background: #FFFFFF;opacity:0.9">
    <div class="row">
      <div class="col-xs-3">
          <a href="${ctx}/home.action"><img src="${ctx}/common/images/home/logo.png" style="padding-top: 12px;"/></a>
      </div>
      <div class="col-xs-6">
        <ul class="nav nav-pills nav-justified">
          <li class="active"><a href="#">首页</a></li>
          <li><a href="javascript:;">蛋糕</a></li>
          <li><a href="javascript:;">甜品</a></li>
          <li><a href="javascript:;">烘焙</a></li>
          <li><a href="javascript:;">礼品包装</a></li>
          <li><a href="javascript:;">我的诺心</a></li>
        </ul>
      </div>
      <div class="col-xs-3">
        <div class="pull-right">
          <button type="button" class="btn btn-link" style="padding: 6px 0px;"><a href="${ctx}/login.action">登录</a></button>
          /
          <button type="button" class="btn btn-link" style="padding: 6px 0px;"><a href="${ctx}/register.action">注册</a></button>
          <button id="headerCart" type="button" class="btn btn-link glyphicon glyphicon-shopping-cart"
                  style="padding: 6px 10px;color: #ff4001;">
          </button>欢迎您：[${user.userName}]
          <div>
            <button onclick="logout()" style="margin-right:10px;background-color: #ff4001;color: #FFFFFF;font-size:4px;width: 60px">LOGOUT</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div style="position: fixed;width: 100%;height: 100%;top: 128px;">
  <video src="${ctx}/common/video/home_video_1.mp4"
         poster="${ctx}/common/images/home/video.jpg"
         width="100%"
         preload="auto" autoplay="" loop="">
    <img src="${ctx}/common/images/home/video.jpg">
  </video>
</div>

<div class="container hide" id="main" style="overflow: auto">
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default" style="margin-top: 650px;height: auto;">
        <div class="panel-body">
          <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">

                <c:forEach var="item" items="${pollGoods}" varStatus="status">
                    <c:if test="${status.index == 0}">
                        <li data-target="#myCarousel" data-slide-to="${status.index}" class="active"></li>
                    </c:if>
                    <c:if test="${status.index > 0}">
                        <li data-target="#myCarousel" data-slide-to="${status.index}"></li>
                    </c:if>
                </c:forEach>

            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
              <c:forEach var="item" items="${pollGoods}" varStatus="status">
                <c:if test="${status.index == 0}">
                <div class="item active">
                    <a href="/detail.action?goodsId=${item.id}" target="_blank"><img src="${ctx}${item.url}" alt="${item.name}"></a>
                </div>
                </c:if>
                <c:if test="${status.index > 0}">
                <div class="item">
                    <a href="/detail.action?goodsId=${item.id}" target="_blank"><img src="${ctx}${item.url}" alt="${item.name}"></a>
                </div>
              </c:if>
              </c:forEach>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next">&rsaquo;</a>
          </div>

          <div style="margin-top: 20px" id="topGoods">
            <%--<a href="javascript:void(0);">--%>
              <%--<img src="/common/images/home/snowcheese.jpg" class="img-rounded" style="width: 100%;"/>--%>
            <%--</a>--%>
            <%--<p class="text-center">雪域牛乳芝士蛋糕 Le Cheesecake</p>--%>
          </div>


          <div class="recommend-model text-center">
            <p class="text-center">诺心推荐</p>

            <small class="text-center">lecake recommend</small>
          </div>
            <c:forEach var="item" items="${recommendGoods}" varStatus = "status" >
                <c:if test="${status.index % 4 == 0}">
            <div class="row">
                <div class="col-xs-3">
                    <div class="thumbnail">
                        <a goodsId="${item.id}" href="javascript:void(0);">
                            <img src="${ctx}${item.url}" alt="${item.name}" />
                            <div class="caption text-center">
                                <h5 class="text-center pname"><small class="span-text01  text-center">${item.tagName}</small>&nbsp;${item.name}</h5>
                            </div>
                        </a>
                        <div class="caption text-center">
                            <a href="javascript:void(0);" goodsId="${item.id}">
                                <span class="glyphicon glyphicon-shopping-cart car" style="color:#ff4001; font-size: 15px;"></span>
                            </a>
                            <p class="text-center" style="color: #ff4001;display: inline;;">￥198</p>
                        </div>
                    </div>
                </div>
                </c:if>
                <c:if test="${status.index % 4 != 0}">
                    <div class="col-xs-3">
                        <div class="thumbnail">
                            <a goodsId="${item.id}" href="javascript:void(0);">
                                <img src="${ctx}${item.url}" alt="${item.name}" />
                                <div class="caption text-center">
                                    <h5 class="text-center pname"><small class="span-text01  text-center">${item.tagName}</small>&nbsp;${item.name}</h5>
                                </div>
                            </a>
                            <div class="caption text-center">
                                <a href="javascript:void(0);" goodsId="${item.id}">
                                    <span class="glyphicon glyphicon-shopping-cart car" style="color:#ff4001; font-size: 15px;"></span>
                                </a>
                                <p class="text-center" style="color: #ff4001;display: inline;;">￥198</p>
                            </div>
                        </div>
                    </div>
                </c:if>
                <c:if  test="${status.index % 4 == 3}">
                    </div>
                </c:if>
            </c:forEach>

          <div class=" text-center">
            <a href="javascript:void(0)">
              <small class="text-center">更多蛋糕</small>
              <br>
              <small class="text-center">more+</small>
            </a>
          </div>
          <div style="background:#ebebeb">
            <div class="row" style="background: #ebebeb;padding-top: 50px;">
              <div class="col-xs-5"></div>
              <div class="col-xs-1 text-center">
                <a href="javascript:void(0);">
                  <span class="glyphicon glyphicon-user" style="font-size: 30px;"></span>
                  <small style="display: block;">客服</small>
                </a>
              </div>
              <div class="col-xs-1 text-center">
                <a href="javascript:void(0);">
                  <span class="glyphicon glyphicon-cloud" style="font-size: 30px;"></span>
                  <small style="display: block;">微信</small>
                </a>
              </div>
              <div class="col-xs-5"></div>
            </div>
            <div class="row text-center" style="background: #ebebeb;padding-top: 20px;">
              <small>客服电话：18578752336&nbsp;&nbsp;服务时间：（08:30-20:30）</small>
            </div>

            <div class="row" style="padding:0;background: #ebebeb;box-sizing: content-box">
              <div class="col-xs-1" ></div>
              <div class="col-xs-10">
                <ol class="breadcrumb text-center" style="background:#ebebeb; ">
                  <li><a href="#">诺心公告</a></li>
                  <li><a href="#">关于诺心</a></li>
                  <li><a href="#">联系我们</a></li>
                  <li><a href="#">客服服务</a></li>
                  <li><a href="#">食品经营许可证</a></li>
                  <li><a href="#">生产许可证</a></li>
                  <li><a href="#">工商管理</a></li>
                </ol>
              </div>
              <div class="col-xs-1"></div>
            </div>
            <div class="row text-center" style="background: #ebebeb;padding-top: 20px;">
              <small>诺心食品（上海）有限公司 上海徐汇区田林路140号28号楼 客服邮箱：services@lecake.com 公司电话：4001-578-578</small>
            </div>
            <div class="row text-center"
                 style="background: #ebebeb;padding-top: 20px;padding-bottom: 30px;">
              <small>copyright©2010-2017诺心lecake.com版权所有 沪ICP备10211730</small>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="padding: 10px">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h6 class="modal-title" id="myModalLabel" >
          加入购物车
        </h6>
      </div>
      <div class="modal-body">
        <div class="container">
          <ul id="modalGoodsSpe" class="nav nav-pills " style="list-style: none">

          </ul>

            <%--<div style="float: left; margin-left: 28px"><a class="size" href="javascript:void (0)">2-4人食</a></div>--%>
        </div>
        <div class="text-center" style="margin-top: 10px">
          <h4 id="modalGoodsName"></h4>
        </div>
        <hr>
        <div class="text-center"><span >口感新鲜美味</span></div>
        <div id="modalPrice" class="text-center" style="margin-top: 10px;">
        </div>
      </div>
      <div class="modal-footer">
        <button id="add" type="button" style="color: #FFFFFF;background-color: #ff4001;border:#ff4001 solid 1px;
                width: 160px;display:block;margin: auto;"
                class="btn1"><p class="text-center">加入购物车</p></button>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

<script type="text/javascript" src="${ctx}/common/js/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/common/js/bootstrap.min.js"></script>
<script src="${ctx}/common/js/jquery.cookie.js"></script>
<script src="${ctx}/common/js/json2.js"></script>
<script>
    $(function(){
        setTimeout(function(){
            $('.panel-default').css("margin-top",document.body.scrollHeight - 50);
            console.log(document.body.scrollHeight);
            $('#main').removeClass('hide');
//					scroll(0,500);
            GoTop();
        },2000);
        var currentPosition = 0, timer, limit = document.body.scrollHeight - 200;

        function GoTop(){
            timer = setInterval(runToTop,1);
        };

        function runToTop(){
            currentPosition += 3;
            if(currentPosition < limit){
                window.scrollTo(0, currentPosition);
            }else{
                clearInterval(timer);
            }
        };
    });

    $(function(){
//        var speId = 1;
        var speSize;
        var goodsId;

        $.get("${ctx}/home/top.action", function(result){
            var html = '';
            $.each(result, function(index, value){
                html += '<a href="javascript:void(0);">'+
                '<img src="'+'${ctx}'+value.url+'" class="img-rounded" style="width: 100%;"/>'+
                '</a>'+
                '<p class="text-center">'+value.name+'</p>';
            });
            $('#topGoods').html(html);
        },'json');

        $('.car').click(function () {
            $('#cartModal').modal({
                keyboard: false
            });
            goodsId = $(this).parent('a').attr('goodsId');
            $.get("${ctx}/home/spe.action",{goodsId: goodsId}, function(result){
                var speHtml = '';
                var priceHtml = '';
                speSize = result.length;
                $.each(result, function(index, value){

                    if(index == 0){
                        speHtml += '<li class="active" style="float: left;" speId='+value.speId+' goodsSpe="'+index+'"><a class="size" href="javascript:void (0)">'+value.speName+'</a></li>';
                    }else{
                        speHtml += '<li style="float: left; margin-left: 20px" speId='+value.speId+' goodsSpe="'+index+'"><a class="size" href="javascript:void (0)">'+value.speName+'</a></li>';
                    }

//                    speHtml += '<div style="float: left; margin-left: 28px" goodsSpe="'+index+'"><a class="size" href="javascript:void (0)">'+value.speName+'</a></div>';
                    if(index == 0){
                        priceHtml += '<li style="list-style: none;"  goodsPrice="'+index+'"><h4 class="price" id="'+value.speId+'"style="margin-left: 20px;color: #ff4001;">￥'+value.price+'</span></li>';
                    }else{

                        priceHtml += '<li style="list-style: none;display:none;" goodsPrice="'+index+'"><h4 class="price" id="'+value.speId+'"style="margin-left: 20px;color: #ff4001;">￥'+value.price+'</span></li>';
                    }

                });
                $('#modalGoodsSpe').html(speHtml);
                $('#modalPrice').html(priceHtml);
                $('#modalGoodsName').html(result[0].name);
            },'json');
        });

        $('#modalGoodsSpe').on('click','[goodsSpe]',function () {
//            speId = $(this).attr('speId');
            var index = $(this).attr('goodsSpe');
            $(this).addClass('active')
                    .siblings().removeClass("active");
            for(var i = 0; i < speSize; i++){
                if(index == i){
                    $('[goodsPrice="'+i+'"]').show();
                }else{
                    $('[goodsPrice="'+i+'"]').hide();
                }
            }
        });

        $('#headerCart').click(function(){
            $.post("${ctx}/isLogin.action",function(result){
                if(result){
                    location.href = "/cart.action"
                }else{
                    alert("请先登录，然后查看您的购物车！");
                    location.href = "${ctx}/login.action"
                }
            });
        });


        /**
        * 添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数
         */
        $('#add').click(function(){
            var speId = $('#modalPrice').find('li:visible').find("h4").attr('id');
            console.log(speId);
            $.post("${ctx}/isLogin.action",function(result){
                if(!result){
                    var cookieSet = { expires: 7, path: '/' }; //设置cookie路径的
                    var cart = $.cookie('cart');
                    var goods = {goodsId : goodsId , speId : speId};
                    if(!cart){//cookie里面没有购物车数据
                        cart = [];
                    }else{
                        cart = JSON.parse(cart);
                    }
                    cart.push(goods);
                    $.cookie('cart',JSON.stringify(cart),cookieSet);

                    /*var str = '您购物车的商品为：\r\n';
                    $.each(cart,function(index,obj){
                        str += 'id为' + obj.id + '商品有' + obj.num + '笔;\r\n';
                    });
                    console.log(str);*/
                }else {
                    $.post("${ctx}/home/addToCart.action",{goodsId:goodsId,speId:speId},function(result){
                        if (result.success) {
                            alert("加入购物车成功");
                            location.href = '${ctx}/cart.action';
                        }else{
                            alert(result.error);
                        }
                    })
                }
            });

        });
    });

    function logout(){
        $.ajax({
            url: "${ctx}/logOut.action",
            type: "POST",
            success: function (result) {
                if (result.success) {
                    location.href = '${ctx}/login.action';
                } else {
                    alert(result.error);
                }
            }
        });
    }


   /* var $poll= $('#myCarousel ').find('.carousel-inner').find('img');
    $($poll).click(function () {
        var goodsId = $pool.attr('goodsId');
        $.post("/getGoodsId.action",{goodsId:goodsId});
    });*/

</script>
</body>
</html>

